<template>
    <div class="page_root" data-page-name="配送详情" data-page-identification="t_ziomekx4ys">
      <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
        <!-- begin vid_18huljwk3q 面包屑_pdz4ir5xsa -->
        <a-breadcrumb class="vid_18huljwk3q" style="word-break: break-word">
          <a-breadcrumb-item v-for="(item, index) in vid_18huljwk3q_props_tabConfig" :key="index" @click="handleBreadcrumbJump(router, item)" href="">
            <template v-if="vid_18huljwk3q_props.rt_showIcon">
              <span v-if="/^(https?:|mailto:|tel:|data:image)/.test(item.icon)" role="img" class="anticon"><embed style="width: 1em;height:1em;" :src="item.icon" /></span>
              <component v-else :is="item.icon" />
            </template>
            {{item.title}}
          </a-breadcrumb-item>
        </a-breadcrumb>
        <!-- end vid_18huljwk3q 面包屑_pdz4ir5xsa -->
        <!-- begin vid_rkqe6n181v 自定义模板_wj7t65m9yw -->
        <div class="main">
          <div class="body">
            <div class="title">{{ programmeName }}</div>
            <a-tabs v-model:activeKey="activeKey" :tabBarGutter="64">
              <a-tab-pane key="1" tab="方案概述">
                <div class="top-title">
                  <a-row class="first-row" :gutter="24">
                    <a-col :span="20" style="padding-left: 30px">区域需求量</a-col>
                    <a-col style="padding-left: 40px"
                      ><a-input v-model:value="filterTable1" placeholder="请输入区域名称关键词">
                        <template #suffix>
                          <search-outlined />
                        </template> </a-input
                    ></a-col>
                  </a-row>
                </div>
                <div class="first-table">
                  <a-table
                    :columns="columns1"
                    :data-source="tableData1"
                    :scroll="{ x: 'max-content' }"
                    size="small"
                    bordered
                    :row-class-name="
                                          (_record, index) =>
                                              index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd'
                                      "
                    :pagination="pagination1"
                  />
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="方案详情" force-render>
                <div style="background-color: #f0f2f5">
                  <div class="detail-div">
                    <a-form>
                      <a-row :gutter="24" class="secord-row">
                        <a-col :span="6" class="normal-col">
                          <a-form-item label="企业至区域约束">
                            <a-input v-model:value="regionConstrainVersion" disabled />
                          </a-form-item>
                        </a-col>
                        <a-col :span="6">
                          <a-form-item label="运费版本">
                            <a-input v-model:value="freightVersion" disabled />
                          </a-form-item>
                        </a-col>
                        <a-col :span="6">
                          <a-form-item label="出厂价版本">
                            <a-input v-model:value="enterpriseAreaFactoryPriceVersionName" disabled />
                          </a-form-item>
                        </a-col>
                      </a-row>
                    </a-form>
                    <div class="second-top">
                      <div class="four-title">
                        <div class="four-title-item-first">
                          <div class="first-item-title"> 运输总费用 </div>
                          <div class="first-item-bottom">
                            <a-tooltip>
                              <template #title>{{ statistics2.num1 }}</template>
                              <span class="bottom-num">{{ statistics2.num1 }}</span>
                            </a-tooltip>
                            <span class="statis-suffix">元</span></div
                          >
                        </div>
                        <div class="four-title-item">
                          <div class="item-title">汽运费用</div>
                          <div class="item-bottom"
                            ><a-tooltip>
                              <template #title>{{ statistics2.num2 }}</template>
                              <span class="bottom-num">{{
                                                              statistics2.num2
                              }}</span> </a-tooltip
                            ><span class="statis-suffix">元</span></div
                          >
                        </div>
                        <div class="four-title-item"
                          ><div class="item-title">火运费用</div>
                          <div class="item-bottom"
                            ><a-tooltip>
                              <template #title>{{ statistics2.num3 }}</template>
                              <span class="bottom-num">{{
                                                              statistics2.num3
                              }}</span> </a-tooltip
                            ><span class="statis-suffix">元</span></div
                          ></div
                        >
                        <div class="four-title-item"
                          ><div class="item-title">船运费用</div>
                          <div class="item-bottom"
                            ><a-tooltip>
                              <template #title>{{ statistics2.num4 }}</template>
                              <span class="bottom-num">{{
                                                              statistics2.num4
                              }}</span> </a-tooltip
                            ><span class="statis-suffix">元</span></div
                          ></div
                        >
                        <div class="four-title-item"
                          ><div class="item-title">散装总配送量</div>
                          <div class="item-bottom"
                            ><a-tooltip>
                              <template #title>{{ statistics2.num5 }}</template>
                              <span class="bottom-num">{{
                                                              statistics2.num5
                              }}</span> </a-tooltip
                            ><span class="statis-suffix">吨</span></div
                          ></div
                        >
                        <div class="four-title-item"
                          ><div class="item-title">袋装总配送量</div>
                          <div class="item-bottom"
                            ><a-tooltip>
                              <template #title>{{ statistics2.num6 }}</template>
                              <span class="bottom-num">{{
                                                              statistics2.num6
                              }}</span> </a-tooltip
                            ><span class="statis-suffix">吨</span></div
                          ></div
                        >
                        <div class="four-title-item"
                          ><div class="item-title">熟料总配送量</div>
                          <div class="item-bottom"
                            ><a-tooltip>
                              <template #title>{{ statistics2.num7 }}</template>
                              <span class="bottom-num">{{
                                                              statistics2.num7
                              }}</span> </a-tooltip
                            ><span class="statis-suffix">吨</span></div
                          ></div
                        >
                      </div>
                    </div>
                    <a-form :model="detailFormData">
                      <a-row :gutter="24" class="first-row" style="position: relative">
                        <a-col :span="5" class="normal-col">
                          <a-form-item label="企业名称">
                            <a-input v-model:value="detailFormData.enterpriseName" placeholder="请输入企业名称" />
                          </a-form-item>
                        </a-col>
                        <a-col :span="5" class="normal-col">
                          <a-form-item label="区域名称"> <a-input v-model:value="detailFormData.areaName" placeholder="请输入区域名称" /> </a-form-item
                        ></a-col>
                        <a-col :span="5" class="normal-col">
                          <a-form-item label="运输方式">
                            <a-select
                              placeholder="请选择运输方式"
                              allowClear
                              v-model:value="detailFormData.transportTypeName"
                              :options="[
                                                              { label: '火运', value: '火运' },
                                                              { label: '汽运', value: '汽运' },
                                                              { label: '船运', value: '船运' }
                                                          ]"
                            /> </a-form-item
                        ></a-col>
                        <a-col :span="5">
                          <a-form-item label="包装类型">
                            <a-select v-model:value="detailFormData.packingTypeName" :options="packageTypeList" allowClear @focus="getUpperPackageList" placeholder="请选择包装类型" /> </a-form-item
                        ></a-col>
                        <a-col :span="2" offset="2" style="position: absolute; right: 24px">
                          <a-space>
                            <a-button class="btn-color" @click="handlerDetailSearch">查询</a-button>
                            <a-button @click="handlerDetailReset">重置</a-button>
                          </a-space></a-col
                        >
                      </a-row>
                    </a-form>
                    <a-table
                      :columns="columns2"
                      :data-source="tableData2"
                      :scroll="{ x: 'max-content' }"
                      size="small"
                      bordered
                      :row-class-name="
                                              (_record, index) =>
                                                  index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd'
                                          "
                      :pagination="pagination2"
                    >
                      <template #bodyCell="{ column, index, record, text }">
                        <template v-if="column.dataIndex === 'freight'">
                          <a-input-number v-if="editTable2" v-model:value="tableData2[index].freight" :min="0" @change="tableData2[index].locked = true" />
                          <template v-else>
                            {{ formatThousandth(text) }}
                          </template>
                        </template>
                        <template
                          v-if="
                                                      ['distributionQuantity', 'remainDistributionQuantity'].includes(
                                                          column.dataIndex
                                                      )
                                                  "
                          >{{ formatThousandth(text) }}</template
                        >
                        <template v-if="column.dataIndex === 'transportType'">
                          {{ transportTypeMap[text] }}
                        </template>
                      </template>
                    </a-table>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="3" tab="企业发货上限">
                <div style="background-color: #f0f2f5">
                  <div class="upper-div">
                    <a-row class="first-row">
                      <a-col :span="6">
                        <a-form>
                          <a-form-item label="选择企业发货上限" class="date-group">
                            <a-input v-model:value="upperLimit" disabled />
                          </a-form-item>
                        </a-form>
                      </a-col>
                    </a-row>
                    <a-form>
                      <a-row :gutter="24" class="first-row">
                        <a-col :span="6">
                          <a-form-item label="企业名称">
                            <a-input placeholder="请输入企业名称" v-model:value="filter2.enterpriseName" />
                          </a-form-item>
                        </a-col>
                        <a-col :span="6">
                          <a-form-item label="包装类型">
                            <a-select v-model:value="filter2.packageType" :options="packageTypeList" allowClear @focus="getUpperPackageList" placeholder="请选择包装类型" /> </a-form-item
                        ></a-col>
                        <a-col :span="4">
                          <a-space>
                            <a-button class="btn-color" @click="handlerSearchUpper">查询</a-button>
                            <a-button @click="handlerResetUpper">重置</a-button>
                          </a-space>
                        </a-col>
                      </a-row>
                    </a-form>
                    <a-table
                      :columns="columns3"
                      :dataSource="dataSource3"
                      :scroll="{ x: 'max-content' }"
                      size="small"
                      bordered
                      :row-class-name="
                                              (_record, index) =>
                                                  index % 2 === 1 ? 'table-striped-even' : 'table-striped-odd'
                                          "
                      :pagination="pagination3"
                    />
                  </div>
                </div>
              </a-tab-pane>
            </a-tabs>
          </div>
        </div>
        <!-- end vid_rkqe6n181v 自定义模板_wj7t65m9yw -->
      </a-spin>
    </div>
  </template>
  <script setup>
    import {
        h, ref, reactive, toRaw, markRaw, watch, computed,
        onBeforeMount, onMounted, onBeforeUnmount, onUnmounted, onActivated, onDeactivated
      } from "vue";
      import { useRoute, useRouter } from 'vue-router';
      const router = useRouter();
      const route = useRoute();
      import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios';
      import { cloneDeep, isNullOrEmpty, isEmptyArr, isNullOrUnDef, localGet, isContained, isArray, isEmpty,
        merge, getDifferenceArray, isObject, traversalTreeStructure, checkCaseCondition, renderStringInTemplate, handleBreadcrumbJump, throttle, permission } from '@/utils/index';
      import dayjs from 'dayjs';
      import { getPagePcChartsDataSourceConvert } from '@/utils/chart';
      import { message, notification, Modal } from 'ant-design-vue'
      import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format';
      /*** PUBLISH_EXEGESIS ***
      import UserTableRecords from '@/model/UserTableRecords';
      *** PUBLISH_EXEGESIS ***/
  
  
  
        // 获取传入的流程ID
        const props = defineProps({
          processInstanceId: {
              type: String
          }
        })
        const immediateWatch = (source, callback) => {
          watch(source, callback, {deep: true,immediate: true })
        }
  
  
  
    /* -------------------------- 属性定义 -------------------------- */
  
        const setTimeOutList = [];
        const pageLoading = reactive({
          loading: false,
          tip: undefined
        });
  
      const vid_18huljwk3q_props = reactive({
            rt_showIcon: false,
    })
  
  
  
        // 处理校验
        const setSubFormName =(parentInfo, name)=>{
          return [parentInfo.parents, parentInfo.cycleIndex, name];
        }
  
  
    /* ========================== 属性定义 ========================== */
  
  
    /* -------------------------- 元素数据引用 -------------------------- */
  
  
    /* ========================== 元素数据引用 ========================== */
  
  
    /* -------------------------- 页面数据 -------------------------- */
  
    /* ========================== 页面数据 ========================== */
  
  
    /* -------------------------- 响应 -------------------------- */
  
    /* ========================== 响应 ========================== */
  
  
    /* -------------------------- 函数 -------------------------- */
  
    /* ========================== 函数 ========================== */
  
  
    /* -------------------------- 页面参数 -------------------------- */
  
      const pageParameter_state = reactive({
          'processInstanceId': props.processInstanceId,
        'id': undefined,
      })
  
    /* ========================== 页面参数 ========================== */
  
  
    /* -------------------------- 组件事件处理方法 -------------------------- */
  
      // ---------------------------- 组件数据同步 ----------------------------
  
      // ============================ 组件数据同步 ============================
  
  
    /* ========================== 组件事件处理方法 ========================== */
  
  
    /* -------------------------- 生命周期 -------------------------- */
    onMounted(() => {
          const pageParams = [{"dataType":"NUMBER","name":"id","dependencies":[]}];
        const strategyMap = {
          STRING: (param, paramValue) => {
            pageParameter_state[param.name] = paramValue;
          },
          BOOLEAN: (param, paramValue) => {
            if('true' === (paramValue || '').toLowerCase()) {
              pageParameter_state[param.name] = true
            } else if('false' === (paramValue || '').toLowerCase()) {
              pageParameter_state[param.name] = false
            } else {
              message.error('参数传入错误！类型不匹配！');
            }
          },
          NUMBER: (param, paramValue) => {
            if (!isNaN(paramValue)) {
              pageParameter_state[param.name] = Number(paramValue);
            } else {
              message.error('参数传入错误！类型不匹配！');
            }
          },
          ARRAY: (param, paramValue) => {
            if (isNullOrUnDef(paramValue)  || !paramValue || paramValue=== 'undefined') {
              pageParameter_state[param.name] = [];
            } else if(paramValue.trim().startsWith('[') && paramValue.trim().endsWith(']')) {
              try {
                pageParameter_state[param.name] = JSON.parse(decodeURI(paramValue));
              } catch (error) {
                console.error('参数解析失败 ',error);
                message.error('参数解析失败 ',error);
              }
            } else {
              console.error('参数传入错误！类型不匹配！');
              message.error('参数传入错误！类型不匹配！');
            }
          },
        };
        pageParams.forEach((param) => {
          strategyMap[param.dataType](param, route.query[param.name]);
        });
  
  
      });
  
      onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
          repeat ?  clearInterval(timer): clearTimeout(timer);
        });
      });
  
    /* ========================== 生命周期 ========================== */
  
  
    /* -------------------------- 数据关联处理 -------------------------- */
  
  
  
  
  
    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */
  
    /* ========================== 数据关联处理 ========================== */
  
  
    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */
    const vid_18huljwk3q_props_tabConfig = computed(() => {
     const initValue = [{"key":"tab1","title":"配送优化","targetPage":{"settingType":"","url":"","customUrl":""},"icon":"","parameter":[],"applicationId":50000089,"query":{}},{"key":"tab2","title":"配送方案管理","icon":"","targetPage":{"settingType":"PAGE_LIST","url":"/app_50000089/page/50000968","customUrl":"","modelId":50000968},"parameter":[],"applicationId":50000089,"query":{}},{"key":"tab_w4pd0d69tk","title":"配送详情","applicationId":50000089,"icon":"","targetPage":{"settingType":"","url":"","customUrl":""},"parameter":[],"query":{}}];
    return initValue;
    })
    /* ========================== 不同组件自定义的处理逻辑 ========================== */
  
  
    // ================================定制化逻辑========================================
    const id = ref(null)
    const programmeName = ref('')
    onMounted(() => {
        // 获取当前 URL 中问号后的参数部分
        const queryString = window.location.search
  
        // 使用 URLSearchParams 解析参数字符串
        const urlParams = new URLSearchParams(queryString)
  
        // 遍历参数并输出
        urlParams.forEach((value, key) => {
            console.log(`${key}: ${value}`)
        })
  
        // 获取特定参数的值
        id.value = urlParams.get('id')
        getOverviewData()
    })
  
    function getOverviewData() {
        get(`/solution-zjcnfsn-distribution/api/v1/distribution/${id.value}`).then(({ data, errorMsg }) => {
            if (errorMsg) {
                message.error(errorMsg)
            } else {
                programmeName.value = data.name
                tableData1Clone = tableData1.value = data.areaDemandList
                tableData2Clone = tableData2.value = data.optimized
                dataSource3Clone = dataSource3.value = data.enterpriseDeliveryConstraintList
                regionConstrainVersion.value = data.enterpriseAreaConstraintVersionName
                freightVersion.value = data.enterpriseAreaFreightVersionName
                enterpriseAreaFactoryPriceVersionName.value = data.enterpriseAreaFactoryPriceVersionName
                upperLimit.value = data.enterpriseDeliveryConstraintVersionName
                getStatistics2()
            }
        })
    }
    const pagination1 = reactive({
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        total: 0, // Assuming a total of 100 items for demonstration
        pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
        showTotal: total => `共 ${total} 个项目,第${pagination1.current} / ${Math.ceil(total / pagination1.pageSize)}页`,
        onChange: table1Change,
        onShowSizeChange: table1PageSizeChange
    })
    const pagination2 = reactive({
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        total: 0, // Assuming a total of 100 items for demonstration
        pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
        showTotal: total => `共 ${total} 个项目,第${pagination2.current} / ${Math.ceil(total / pagination2.pageSize)}页`,
        onChange: table2Change,
        onShowSizeChange: table2PageSizeChange
    })
    const pagination3 = reactive({
        current: 1,
        pageSize: 10,
        showSizeChanger: true,
        total: 0, // Assuming a total of 100 items for demonstration
        pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
        showTotal: total => `共 ${total} 个项目,第${pagination3.current} / ${Math.ceil(total / pagination3.pageSize)}页`,
        onChange: table3Change,
        onShowSizeChange: table3PageSizeChange
    })
    function table1Change(val) {
        pagination1.current = val
    }
    function table3Change(val) {
        pagination3.current = val
    }
    function table2Change(val) {
        pagination2.current = val
    }
    function table1PageSizeChange(current, val) {
        pagination1.pageSize = val
        pagination1.current = 1
    }
    function table2PageSizeChange(current, val) {
        pagination2.pageSize = val
        pagination2.current = 1
    }
    function table3PageSizeChange(current, val) {
        pagination3.pageSize = val
        pagination3.current = 1
    }
    function debounce(callback, timer) {
        let ticker = null
        return () => {
            if (ticker) {
                clearTimeout(ticker)
            }
            ticker = setTimeout(() => {
                callback.apply(callback, arguments)
            }, timer)
        }
    }
    const activeKey = ref('1')
    const filterTable1 = ref('')
    let tableData1 = ref([])
    // 并不是真克隆 保留本体但是过滤的数据发生改变 此数据也应该改变
    let tableData1Clone = []
    const columns1 = [
        {
            title: '区域名称',
            dataIndex: 'areaName'
        },
        {
            title: '包装形式',
            dataIndex: 'packingTypeName'
        },
        {
            title: '产品品牌',
            dataIndex: 'brandName'
        },
        {
            title: '产品品种',
            dataIndex: 'categoryName'
        },
        {
            title: '运输方式',
            dataIndex: 'transportTypeName'
        },
        {
            title: '需求量(吨)',
            dataIndex: 'demand'
        }
    ]
    const transportTypeMap = {
        TRAIN: '火运',
        SHIP: '船运',
        BUS: '汽运'
    }
    function changeTable1() {
        tableData1.value = tableData1Clone.filter(item => {
            return item.areaName.indexOf(filterTable1.value) !== -1
        })
        pagination1.current = 1
    }
    changeTable1 = debounce(changeTable1, 300)
  
    watch(
        () => filterTable1.value,
        () => {
            filterTable1.value
            changeTable1()
        }
    )
    // ================================end 页面1========================================
  
    // ================================start 页面2========================================
    const formatThousandth = value => {
        if (!value || isNaN(value)) {
            return value || '0.00'
        }
        const [int, fraction] = Number(value).toFixed(2).split('.')
        var reg = /(\d)(?=(?:\d{3})+$)/g
        return int.replace(reg, '$1,') + (!!fraction ? '.' + fraction : '')
    }
    const regionConstrainVersion = ref('')
    const freightVersion = ref('')
    const enterpriseAreaFactoryPriceVersionName = ref('')
    const detailFormData = reactive({
        enterpriseName: '',
        areaName: '',
        transportTypeName: undefined,
        packingTypeName: undefined
    })
    const statistics2 = reactive({
        num1: 0,
        num2: 0,
        num3: 0,
        num4: 0,
        num5: 0,
        num6: 0,
        num7: 0
    })
    const packageTypeList = ref([])
    const columns2 = [
        {
            title: '企业名称',
            dataIndex: 'enterpriseName'
        },
        {
            title: '中转仓',
            dataIndex: 'transferName'
        },
        {
            title: '区域名称',
            dataIndex: 'areaName'
        },
        {
            title: '运输方式',
            dataIndex: 'transportType'
        },
        {
            title: '包装类型',
            dataIndex: 'packingTypeName'
        },
        {
            title: '产品品牌',
            dataIndex: 'brandName'
        },
        {
            title: '产品品种',
            dataIndex: 'category'
        },
        {
            title: '配送量(吨)',
            dataIndex: 'distributionQuantity'
        },
        {
            title: '剩余配送量(吨)',
            dataIndex: 'remainDistributionQuantity'
        },
        {
            title: '配送运费(元)',
            dataIndex: 'freight'
        },
        {
            title: '运费单价(元)',
            dataIndex: 'freightUnit'
        },
        {
            title: '固定发运量(吨)',
            dataIndex: 'fixDelivery'
        }
    ]
    let tableData2 = ref([])
    let tableData2Clone = ref([])
    function getStatistics2() {
        let num1 = 0
        let num2 = 0
        let num3 = 0
        let num4 = 0
        let num5 = 0
        let num6 = 0
        let num7 = 0
        tableData2Clone.forEach(
            ({ freight, distributionQuantity, transportType, packingTypeName, remainDistributionQuantity }) => {
                num1 += Number(freight)
  
                if (transportType === 'BUS') {
                    num2 += Number(freight)
                } else if (transportType === 'TRAIN') {
                    num3 += Number(freight)
                } else if (transportType === 'SHIP') {
                    num4 += Number(freight)
                }
                packingTypeName = packingTypeName.replace('水泥', '')
                if (packingTypeName === '袋装') {
                    num6 += Number(distributionQuantity)
                    num6 += Number(remainDistributionQuantity)
                } else if (packingTypeName === '散装') {
                    num5 += Number(distributionQuantity)
                    num5 += Number(remainDistributionQuantity)
                } else if (packingTypeName === '熟料') {
                    num7 += Number(distributionQuantity)
                    num7 += Number(remainDistributionQuantity)
                }
            }
        )
        statistics2.num1 = num1.toFixed(2)
        statistics2.num2 = num2.toFixed(2)
        statistics2.num3 = num3.toFixed(2)
        statistics2.num4 = num4.toFixed(2)
        statistics2.num5 = num5.toFixed(2)
        statistics2.num6 = num6.toFixed(2)
        statistics2.num7 = num7.toFixed(2)
    }
    function getUpperPackageList() {
        const param = {
            filter: {
                baseTypeId: 1
            },
            pageNo: 1,
            pageSize: 100000
        }
        post('/solution-zjcnfsn-distribution/api/v1/base_info/search', param).then(({ errorMsg, data }) => {
            if (errorMsg) {
                message.error(errorMsg)
            } else {
                packageTypeList.value = data.content.map(item => {
                    return {
                        label: item.name,
                        value: item.name
                    }
                })
            }
        })
    }
    function handlerDetailSearch() {
        if (detailFormData.packingTypeName === undefined) {
            detailFormData.packingTypeName = ''
        }
        if (detailFormData.transportTypeName === undefined) {
            detailFormData.transportTypeName = ''
        }
        tableData2.value = tableData2Clone.filter(item => {
            return (
                item.enterpriseName.indexOf(detailFormData.enterpriseName) !== -1 &&
                item.areaName.indexOf(detailFormData.areaName) !== -1 &&
                transportTypeMap[item.transportType].indexOf(detailFormData.transportTypeName) !== -1 &&
                item.packingTypeName.indexOf(detailFormData.packingTypeName) !== -1
            )
        })
        pagination2.current = 1
    }
    function handlerDetailReset() {
        detailFormData.enterpriseName = ''
        detailFormData.areaName = ''
        detailFormData.transportTypeName = ''
        detailFormData.packingTypeName = ''
        handlerDetailSearch()
    }
    // ================================end 页面2========================================
    // ================================start 页面3========================================
    const upperLimit = ref('')
    const filter2 = reactive({
        enterpriseName: '',
        packageType: undefined
    })
    const columns3 = [
        {
            title: '企业名称',
            dataIndex: 'enterpriseName'
        },
        {
            title: '包装类型',
            dataIndex: 'packageTypeName'
        },
        {
            title: '产品品牌',
            dataIndex: 'brandName'
        },
        {
            title: '产品品种',
            dataIndex: 'categoryName'
        },
        {
            title: '运输方式',
            dataIndex: 'transportTypeName'
        },
        {
            title: '发运量上限(吨)',
            dataIndex: 'maxMonthlyDelivery'
        },
        {
            title: '操作时间',
            dataIndex: 'lastModifyDate'
        }
    ]
    const dataSource3 = ref([])
    let dataSource3Clone = []
    function handlerSearchUpper() {
        if (filter2.packageType === undefined) {
            filter2.packageType = ''
        }
        dataSource3.value = dataSource3Clone.filter(item => {
            return (
                item.enterpriseName.indexOf(filter2.enterpriseName) !== -1 &&
                item.packageTypeName.indexOf(filter2.packageType) !== -1
            )
        })
        pagination3.current = 1
    }
    function handlerResetUpper() {
        filter2.packageType = ''
        filter2.enterpriseName = ''
        handlerSearchUpper()
    }
  </script>
  <style lang="less" scoped>
    .page_root {
    width: 100%;
    height: 100%;
    overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container)
     {
        height: 100%;
    }
    .table-moreBtn_down {
      overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100px;
    }
  
    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
      background: #ebf1ff;
    }
  
    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
      z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
      left: 15px !important;
      width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
      left: 30px !important;
      width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
      left: 45px !important;
      width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
      left: 60px !important;
      width: calc(100% - 60px);
    }
  
    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list)
     {
        height: 100%;
        width: 50%;
    }
    .vid_18huljwk3q :deep(a) {
          color: undefined;
        }
        :deep(.vid_18huljwk3q.@{ant-prefix}-breadcrumb) > span:last-child a {
          color: undefined;
          opacity: 0.75;
        }
    .vid_18huljwk3q{
        height:40px;
        display:flex;
        align-items:center;
        flex-wrap:undefined;
        padding-left:24px;
        background-color:rgba(255, 255, 255, 1);
        box-shadow:0px 0px 0px 0px
    }
    .vid_rkqe6n181v{
        width:100%
    }
  
    .body {
        height: fill-available;
        height: -webkit-fill-available;
        margin: 0 20px 20px 20px;
        border-radius: 6px;
    }
    .body > * {
        background-color: #fff;
    }
  
    .title {
        height: 60px;
        font-size: 24px;
        font-weight: 600;
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 2px;
        margin-bottom: 16px;
      margin-top: 24px;
    }
    .content {
        padding: 0 24px;
    }
    .table-header {
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-indent: 10px;
    }
    .table-header.tag {
        border-left: 8px solid #1890ff;
        margin-left: 20px;
    }
    .table-header div:last-child {
        display: flex;
        margin-right: 20px;
    }
    .gather {
        display: inline-block;
        border: 1px solid #f0f0f0;
        padding: 10px 25px;
        margin-right: 10px;
        background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(243, 248, 254, 1) 100%);
    }
  
    .second-top {
        margin-bottom: 12px;
    }
    .statis-suffix {
        font-size: 14px;
        color: #e02020;
        margin-left: 8px;
        font-weight: normal;
    }
    .bottom-num {
        max-width: 210px;
        overflow: hidden; /*超出部分隐藏*/
        text-overflow: ellipsis;
        display: inline-block; /*超出部分省略号表示*/
    }
    .statis-title {
        font-size: 14px;
        color: #333333;
    }
  
    .detail-div {
        border-radius: 6px;
        background-color: #fff;
        margin-bottom: 15px;
        padding: 0 20px;
    }
    .detail-table {
        border-radius: 6px;
        background-color: #fff;
        padding: 20px;
    }
    .upper-div {
        background-color: #fff;
        margin-bottom: 15px;
        border-radius: 6px;
        padding: 0 20px;
    }
    .upper-table {
        padding: 20px;
        border-radius: 6px;
        background-color: #fff;
    }
    .main {
        background-color: #f0f2f5;
    }
    /deep/.ant3-tabs > .ant3-tabs-nav,
    .ant3-tabs > div > .ant3-tabs-nav {
        padding: 0 20px;
        color: #595959;
    }
    /deep/.ant3-tabs-tab.ant3-tabs-tab-active .ant3-tabs-tab-btn {
        color: #e02020;
    }
    /deep/.ant3-tabs-ink-bar {
        background-color: #e02020;
    }
    /deep/.ant3-tabs-tab:hover {
        color: #e02020;
    }
    .first-table {
        padding: 0 20px;
        border-radius: 6px;
    }
    :deep(.@{ant-prefix}-table-thead) > tr > th {
        background-color: #f5f5f5;
        font-size: 14px;
        font-family: arial, helvetica, 'microsoft yahei';
        font-weight: 600;
        color: #262626;
        padding: 0 24px !important;
        height: 40px;
    }
    /deep/ .ant3-table-cell{
        color: #262626;
    }
    .top-title {
        position: relative;
        font-size: 16px;
        font-weight: 800;
        margin-left: 10px;
        margin-bottom: 16px;
        color: #262626;
    }
  
    .top-title:before {
        position: absolute;
        content: '';
        background-color: #e02020;
        width: 4px;
        height: 16px;
        position: absolute;
        left: 10px;
        top: 58%;
        margin-top: -10px;
    }
    .first-row {
        height: 32px;
        line-height: 32px;
    }
    .secord-row {
        height: 32px;
        line-height: 32px;
        margin-bottom: 16px;
    }
    .four-title {
        display: flex;
        height: 80px;
        background: #fafafa;
        border: 1px solid rgba(224, 32, 32, 1);
        border-radius: 2px;
        padding: 15px 0;
    }
    .four-title-item-first {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        border-right: 1px solid;
        border-image: linear-gradient(to bottom, #f5f5f5, #e02020, #f5f5f5) 1 100%;
        padding: 0 16px;
    }
    .four-title-item {
        display: flex;
        flex-direction: column;
        width: 14%;
        height: 100%;
        border-right: 1px solid;
        border-image: linear-gradient(to bottom, #f5f5f5, #e02020, #f5f5f5) 1 100%;
        padding: 0 16px;
    }
    .item-title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
    }
    .first-item-title {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.85);
    }
    .item-bottom {
        font-size: 20px;
        color: #e02020;
        font-weight: 600;
        line-height: 30px;
        display: flex;
    }
    .first-item-bottom {
        font-size: 20px;
        color: #e02020;
        font-weight: 600;
        line-height: 30px;
        display: flex;
    }
    .first-row {
        margin-bottom: 12px;
    }
    .btn-color {
        background-color: #e02020;
        color: #fff;
    }
    /deep/.ant3-form-item-label > label {
        font-weight: normal;
        color: #595959;
    }
    .normal-col {
        font-weight: normal;
        color: #595959;
    }
    /deep/.ant3-select-single.ant3-select-show-arrow .ant3-select-selection-item,
    .ant3-select-single.ant3-select-show-arrow .ant3-select-selection-placeholder {
        color: #262626;
        font-weight: 600;
    }
    :deep(.table-striped-even) td {
        background-color: #fafafa;
        padding-left: 24px !important;
    }
    :deep(.table-striped-odd) td {
        background-color: #ffffff;
        padding-left: 24px !important;
    }
    /deep/.ant3-tabs > .ant3-tabs-nav .ant3-tabs-nav-wrap,
    .ant3-tabs > div > .ant3-tabs-nav .ant3-tabs-nav-wrap {
        border-bottom: 1px solid #d9d9d9;
    }
    .border-btn {
        border: 1px solid #d9d9d9;
        color: #595959;
    }
  </style>
  